// ai云监理
<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship" v-if="!isShowSet">
      <div class="workmanship_tit">
        <span>{{ form.title }}<i></i></span>
      </div>
      <div class="workmanship_con">
        <div class="statistics">
          <template v-if="form.fixed_num_name">
               <span style="margin-right: 20px" v-if="form.datatype==='3'">
            {{ form.fixed_num_name }} {{ parseInt(form.fixed_num_total) }}次</span>
            <span style="margin-right: 20px" v-else>
            {{ form.fixed_num_name }} {{ form.fixed_num_total }}次</span>
          </template>

          <!-- <span>业主监理23.45万次</span> -->
        </div>
        <vue-seamless-scroll
            :data="form.datalist"
            :class-option="classOption"
            class="statisticsBox"
        >
          <ul class="statisticsList">
            <li
                class="clearfix"
                v-for="(item, index) in form.datalist"
                :key="index"
            >
              <template v-if="form.datatype==='3'">
                 <span>监理{{
                     parseInt(item.num)
                   }}次</span>{{ item.name }}
              </template>
              <template v-else>
                <span>监理{{ item.num }}次</span>{{ item.name }}
              </template>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="workmanship editBox" v-else>
      <span @click="dialogVisible = true">编辑</span>
    </div>
    <!-- 弹框 -->
    <el-dialog title="栏目设置"
               v-loading="loading"
               :close-on-click-modal="false"
               :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="saveFrom" label-width="100px">
        <el-form-item label="栏目标题：">
          <el-input v-model="saveFrom.title" class="inputDiv"></el-input>
        </el-form-item>
        <el-form-item label="数据方式：">
          <el-radio-group v-model="saveFrom.datatype">
            <el-radio label="0">固定值</el-radio>
            <el-radio label="3">基数叠加</el-radio>
            <el-radio label="1">系统统计</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 固定值 -->
        <div v-if="saveFrom.datatype === '0'">
          <el-form-item label="监理总数：">
            <el-input v-model="saveFrom.fixed_num_name" class="inputDiv"></el-input>
            <el-input
                v-model="saveFrom.fixed_num_total"
                class="inputDiv ml40"
            ></el-input>
          </el-form-item>
          <el-form-item label="详情内容：">
            <div
                class="mb10"
                v-for="(item, index) in saveFrom.datalist"
                :key="index"
            >
              <el-input v-model="item.name" class="inputDiv"></el-input>
              <el-input v-model="item.num" class="inputDiv ml40"></el-input>
              <i
                  @click="delVariable(index)"
                  class="ml10"
                  style="cursor: pointer; color: #409EFF;
}"
              >删除</i
              >
            </div>
            <el-button type="text" @click="addVariable">+新增一条</el-button>
          </el-form-item>
        </div>
        <!-- 基数叠加 -->
        <div v-if="saveFrom.datatype === '3'">
<!--          <el-form-item label="监理总数">-->
<!--            <el-input v-model="saveFrom.base_num_total" class="inputDiv"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="详情数据：">
            <el-input
                v-model="saveFrom.base_num_detail"
                class="inputDiv"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 基数叠加 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
        <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import {constructionRequest} from "@/utils/http/request";

export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {
        datatype: "",
        title: "",
        fixed_num_name: "",
        fixed_num_total: null, //固定值：监理总数
        base_num_total: null, //基数：监理总数
        base_num_detail: null, //基数：详情监理基数
        datalist: [],
      },
      saveFrom: {}
    };
  },
  props: ["isShowSet"],
  components: {vueSeamlessScroll},
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.getData();
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.saveFrom = {...this.form}
        if (this.saveFrom.datatype !== '0') {
          this.saveFrom.datalist = []
        }
      }
    }
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true
      constructionRequest.AIJianli({
        datatype: 'null',
      }).then((res) => {
        if (res.code === "01") {
          this.form = {
            ...res,
          };
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    //保存并返回主页
    submit(val) {
      this.loading = true
      constructionRequest.AIJianliEdit({
        ...this.saveFrom,
      }).then((res) => {
        if (res.code === "01") {
          this.$message.success(res.msg || "修改成功");
          this.getData();
          this.dialogVisible = false;
          if (val === 2) {
            this.$emit("func1", false); //向父组件传值
          }
        }
      }).catch(() => {
      })
    },
    //新增变量
    addVariable() {
      let item = {
        name: "",
        num: 0,
      };
      this.saveFrom.datalist.push(item);
    },
    //删除变量
    delVariable(index) {
      this.saveFrom.datalist.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: calc(100% - 20px);
  font-size: 12px;
  padding-top: 20px;

  .workmanship {
    height: 100%;

    .workmanship_tit {
      background: url(../../assets/image/title_left.png) no-repeat;
      height: 29px;
      line-height: 12px;
      font-size: $font-sise32;
      font-weight: bold;
      color: #fdf0a8;
      padding-left: 8px;

      span {
        i {
          width: 54px;
          height: 16px;
          display: inline-block;
          background: url(../../assets/image/title_left_btn.png) no-repeat;
          margin-left: 10px;
        }
      }
    }

    .workmanship_con {
      height: calc(100% - 29px);
      overflow-y: auto;

      .statistics {
        height: 60px;
        line-height: 60px;
        color: #fff;
        font-size: 25px;
      }

      .statisticsBox {
        height: calc(100% - 60px);
        overflow: hidden;

        .statisticsList {
          list-style: none;
          color: #4affff;
          line-height: 35px;
          font-size: 21px;
        }

        .statisticsList li span {
          float: right;
        }
      }
    }
  }

  .editBox {
    background: #384768;
    border: 1px solid #67b1ea;
    color: #6ef7ff;
    font-size: 20px;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    justify-content: center;

    span {
      cursor: pointer;
    }
  }
}
</style>
